<!DOCTYPE html>
<html data-layout-decorate="~{bbs/layout/layout}">
<head>
    <title>帖子详情</title>
    <!-- 富文本编辑器 js -->
    <script type="text/javascript"
            data-th-src="@{../../bbs-static/js/wangEditor.min.js}"></script>
    <link rel="stylesheet"
          data-th-href="@{../../bbs-static/css/jquery.toast.min.css}">
    <script type="text/javascript"
            data-th-src="@{../../bbs-static/js/jquery.toast.min.js}"></script>
    <script>

        <!--渲染Toast -->
        function toast(txt, icon) {
            $.toast({
                text: txt, // Text that is to be shown in the toast
                heading: '系统提醒', // Optional heading to be shown on the toast
                icon: icon || 'error', // Type of toast icon warning, info, success, error
                showHideTransition: 'slide', // fade, slide or plain
                allowToastClose: true, // Boolean value true or false
                hideAfter: 2000, // false to make it sticky or number representing the miliseconds as time after which toast needs to be hidden
                stack: false, // false if there should be only one toast at a time or a number representing the maximum number of toasts to be shown at a time
                position: 'top-right', // bottom-left or bottom-right or bottom-center or top-left or top-right or top-center or mid-center or an object representing the left, right, top, bottom values
            });
        };

        <!-- 判断字符串是否为空，为空则返回 true -->
        function isBlank(str) {
            return (!str || /^\s*$/.test(str));
        };

    </script>
</head>
<body>

<section data-layout-fragment="content">
    <div class="container">

        <div class="row">
            <div class="col-md-9">
                <!--帖子-->
                <div class="panel panel-default">
                    <!--文章标题-->
                    <div class="panel-body">
                        <div class="media">
                            <div class="media-body">
                                <h3 class="media-heading" data-th-text="${article.title}">这里是放文章标题滴~</h3>
                                <div class="article-info">

                                    <a href="javascript:vote('5ca99634bbe14024b9e067da');"><span
                                            class="glyphicon glyphicon-heart-empty text-danger article-up"></span></a>

                                    0&nbsp;•&nbsp;

                                    <span class="badge badge-default">文章</span>

                                    &nbsp;•&nbsp;<span><a data-th-href="'../user/'+${article.sysUser.username}"
                                                          data-th-text="${article.sysUser.name}">这里是作者</a> 发布于 [[${article.inTime}]] </span>

                                </div>
                            </div>
                            <div class="media-right">
                                <img class="media-object avatar-lg" src=""
                                     onerror="onerror=null;src=''"
                                     alt="avatar">
                            </div>
                        </div>
                    </div>
                    <!--分割线-->
                    <div class="divide"></div>
                    <!--文章内容-->
                    <div class="panel-body article-content">

                        <div class="alert alert-warning" role="alert"><b>原创文章不允许转载, 版权归你说我说所有</b></div>
                        <!--这里放文章帖子内容-->
                        <div data-th-utext="${article.content}">这里是放帖子内容滴</div>

                    </div>
                    <!--分割线-->
                    <div class="divide"></div>
                </div>

                <!--评论列表-->
                <div class="panel panel-default" data-th-if="${commentList.size()}>0">
                    <div class="panel-heading"><span class="glyphicon glyphicon-th-list"></span> <span
                            data-th-text="${commentList.size()}"></span> 条评论
                    </div>
                    <div class="panel-body comments">

                        <div class="media" data-th-each="comment:${commentList}">
                            <div class="media-left">
                                <a data-th-href="${#httpServletRequest.contextPath+'/bbs/user/'+comment.sysUser.username}"><img
                                        class="avatar-sm"
                                        src=""
                                        onerror="onerror=null;src=''"
                                        alt="avatar"></a>
                            </div>
                            <div class="media-body">
                                <div class="media-heading comment-info">
                                    <a data-th-href="${#httpServletRequest.contextPath+'/bbs/user/'+comment.sysUser.username}"
                                       data-th-text="${comment.sysUser.name}">这儿是作者</a> 发布于
                                    <span data-th-text="${comment.inTime}"></span>
                                    <div class="pull-right">

                                        &nbsp;<a href="javascript:comment_vote('5ca996cebbe14024b9e067db');"><span
                                            class="glyphicon glyphicon-heart-empty text-danger" title="点赞"></span></a>

                                        0
                                        &nbsp;<a href="javascript:reply('5ca996cebbe14024b9e067db', 'tomoya92');"><span
                                            class="glyphicon glyphicon-comment" title="回复"></span></a>

                                    </div>
                                </div>
                                <div class="comments-content" data-th-utext="${comment.content}">
                                    <p>这里是放的评论的内容</p>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

                <!--没有评论-->
                <div class="no_comments" data-sec-authorize="isAuthenticated()" data-th-if="${commentList.size()}<=0">
                    <div class="text-center">目前还没有回答，快来帮帮TA吧！</div>
                </div>

                <!--添加新评论-->
                <div class="panel panel-default" data-sec-authorize="isAuthenticated()">
                    <div class="panel-heading" id="add_comment">
                        <span class="glyphicon glyphicon-edit"></span> 添加一条评论
                        <span class="text-danger pull-right">请尽量发布对他人有帮助的评论</span>
                    </div>

                    <form action="" method="post">
                        <input type="hidden" name="articleId" id="articleId" data-th-value="${article.id}">
                        <input type="hidden" name="commentId" id="commentId" value="">
                        <!--渲染富文本编辑器-->
                        <div id="editor"></div>
                        <!--隐藏的文本域，传递的是这个-->
                        <textarea id="text1" name="datails" style="display: none"></textarea>
                        <!--<textarea name="content" id="content" rows="4" class="form-control"
                                  placeholder="添加一条评论"></textarea>-->
                        <div style="padding: 0 15px 10px;">
                            <button type="button" onclick="submitClick()" class="btn btn-success"
                                    style="margin-top: 10px;">
                                评论
                            </button>
                        </div>
                    </form>
                </div>

            </div>

            <!--右侧-->
            <div class="col-md-3 hidden-xs">
                <!--关于作者-->
                <div class="panel panel-default">
                    <div class="panel-heading"><span class="glyphicon glyphicon-user"></span> 作者</div>
                    <div class="panel-body">
                        <p>
                            <a data-th-href="${#httpServletRequest.contextPath+'/bbs/user/'+article.sysUser.username}"><img
                                    src=""
                                    onerror="onerror=null;src=''"
                                    class="avatar-md" alt="avatar"></a>
                            <span>&nbsp;&nbsp;<a
                                    data-th-href="${#httpServletRequest.contextPath+'/bbs/user/'+article.sysUser.username}"
                                    data-th-text="${article.sysUser.name}">这里是作者</a></span>
                        </p>
                        <!--<p>积分：0</p>-->

                    </div>
                </div>

                <!--作者其他文章-->
                <!--<div class="panel panel-default">
                    <div class="panel-heading"><span class="glyphicon glyphicon-th-list"></span> 作者其它文章</div>
                    <table class="table">

                        <tbody>
                        <tr>
                            <td>
                                <a href="//">Python 如何加快request post 请求</a>
                            </td>
                        </tr>

                        </tbody>
                    </table>
                </div>-->

            </div>

        </div>
    </div>
    <script type="text/javascript">

        var E = window.wangEditor
        var editor = new E('#editor')
        // 自定义字体
        editor.customConfig.fontNames = [
            '宋体',
            '微软雅黑'
        ]
        // 自定义配置菜单
        editor.customConfig.menus = [
            /*'bold',  // 粗体
            'italic',  // 斜体
            'underline',  // 下划线
            'strikeThrough',  // 删除线
            'link',  // 插入链接
            'list',  // 列表
            'quote',  // 引用
            'emoticon',  // 表情
            'image',  // 插入图片
            'video',  // 插入视频
            'code',  // 插入代码
            'undo',  // 撤销
            'redo'  // 重复*/
        ]
        // 使用 base64 保存图片
        editor.customConfig.uploadImgShowBase64 = true;
        var $text1 = $('#text1');
        editor.customConfig.onchange = function (html) {
            // 监控变化，同步更新到 textarea
            $text1.val(html)
        };
        // 或者 var editor = new E( document.getElementById('editor') )
        editor.create();
        // 初始化 textarea 的值
        $text1.val(editor.txt.html());

        function submitClick() {
            console.log("点击了一下评论");
            var content = editor.txt.text();
            if (isBlank(content)) {
                toast('请输入评论内容', 'error');
                return;
            }
            ;
            $.ajax({
                type: 'POST',
                url: './' + $('#articleId').val() + '/comment',
                data: {
                    articleId: $('#articleId').val(),
                    content: editor.txt.text()
                },
                success: function (data, status) {
                    console.log('data: ' + data);
                    console.log('status: ' + status);
                    window.location.reload();
                }
            });
        };


    </script>
</section>

</body>
</html>